package myJs

import myJs.cps.{PureInputCp, Style}
import myJs.myPkg.{MyFetch, ReactRouterDOM}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.web.html._

import scala.scalajs.js
import scala.concurrent.ExecutionContext.Implicits.global
import myJs.Implicits._
import myJs.api.Api
import myJs.assets.assetsCss
import myJs.browse.Browse
import myJs.explore.Explore
import myJs.search.detail.Detail
import myJs.statistics.Statistics
import org.scalajs.dom.window.localStorage
import typings.csstype.csstypeStrings

/**
 * Created by yz on 22/4/2022
 */
@react object IndexCp {

  type Props = Unit

  private val css = List(
    assetsCss.Home,
  )

  val component = FunctionalComponent[Props] { props =>

    MainCp(title = "Home")(
      div(className := "home",

        div(style := Style(marginBottom = "0px"), className := "panel panel-default",
          div(className := "panel-body",
            div(className := "row",
              div(className := "col-md-7",
                div(className := "panel panel-default",
                  div(className := "panel-heading",
                    h4(className := "bold",
                      "Welcome to GepLiver"
                    )
                  ),
                  div(className := "panel-body",
                    p(style := Style(fontSize = "15px"), className := "text-justify",
                      "GepLiver is a longitudinal and multidimensional liver expression atlas integrating transcriptomic profiles of human tissues, mouse models and single cells to depict stepwise liver transitions across a full range of developmental stages and liver diseases phases."
                    ),
                    p(style := Style(fontSize = "15px"), className := "text-justify",
                      "This atlas comprehensively catalogs transcripts (mRNAs, lncRNAs and circRNAs) and cell types spanning all liver conditions and allows researchers to explore how the gene expression and cell populations dynamically change during liver transitions as well as the functional and clinical implications of this evolving molecular landscape."
                    ), p(style := Style(fontSize = "15px"), className := "text-justify",
                      "GepLiver atlas serves as an openly accessible, large-scale hepatology resource which is expected to shed novel light on transcriptomic dynamics and connections among liver conditions, fuel both basic and clinical research for improved detection, prediction and intervention of liver diseases, and ultimately contribute to deeper insight into liver physiology and pathology."
                    )

                  )
                )
              ),
              div(style := Style(marginTop = "0px"), className := "col-md-5",

                div(id := "myNiceCarousel", className := "carousel", data - "ride" := "carousel", data - "interval" := "3000",
                  div(className := "carousel-inner",
                    div(className := "item active screenshot",
                      img(style := Style(height = "300px"), src := s"${Api.images}/p1.png"),
                    ),
                    div(className := "item screenshot",
                      img(style := Style(height = "300px"), src := s"${Api.images}/p2.png"),
                    ),
                    div(className := "item screenshot",
                      img(style := Style(height = "300px"), src := s"${Api.images}/p3.png"),
                    ),
                  ),
                  a(className := "left carousel-control", href := "#myNiceCarousel", data - "slide" := "prev",
                    span(className := "fa fa-chevron-left")
                  ),
                  a(className := "right carousel-control", href := "#myNiceCarousel", data - "slide" := "next",
                    span(className := "fa fa-chevron-right")
                  ),
                )
              ),
              div(className := "col-sm-7",
                div(className := "panel panel-default",
                  div(className := "panel-heading",
                    h4(className := "bold",
                      "Overview"
                    )
                  ),
                  div(style := Style(paddingTop = "5px"), className := "panel-body",

                    div(style := Style(marginBottom = "35px"), id := "pathway",
                      div(style := Style(marginBottom = "5px"), className := "row",
                        div(style := Style(textAlign = csstypeStrings.center), className := "col-sm-12 overviewTitleRow",
                          span(style := Style(fontWeight = "bold"), className := "myFont overviewTitle",
                            "Features"
                          )
                        )
                      ),
                      div(className := "myJustify",
                        div(className := "myFLeft",
                          h5(className := "featuresTitle", "Bulk RNA-seq"),
                          div(className := "myFIn",
                            div(className := "flexHalf",
                              img(style := Style(marginBottom = "4px", height = "100px"),
                                src := s"${Api.images}/heatmap.png")
                            ),
                            div(className := "myFRRight",
                              div(className := "featureContentRow myFCLine",
                                div(style := Style(flex = 1), className := "myRowLeft",
                                  a(style := Style(fontWeight = "bold"),
                                    href := s"${Browse.absolutePath}?geneType=protein-coding", target := "_blank", "45,860")
                                ),
                                div(style := Style(flex = 1), className := "myRowRight",
                                  span(className := "myFont bold", "mRNAs")
                                ),
                              ),
                              div(className := "featureContentRow",
                                div(className := "myRowLeft",
                                  a(style := Style(fontWeight = "bold"),
                                    href := s"${Browse.absolutePath}?tab=cRNA", target := "_blank", "72,816")
                                ),
                                div(className := "myRowRight",
                                  span(className := "myFont bold", "circRNAs")
                                ),
                              ),
                              div(className := "featureContentRow",
                                div(className := "myRowLeft",
                                  a(style := Style(fontWeight = "bold"),
                                    href := s"${Browse.absolutePath}?geneType=lncRNA", target := "_blank", "54,865")
                                ),
                                div(className := "myRowRight",
                                  span(className := "myFont bold", "lncRNAs")
                                ),
                              ),
                            ),

                          ),
                        ),
                        div(className := "myFRight",
                          h5(className := "featuresTitle", "Single Cell RNA-seq"),
                          div(className := "myFIn",
                            div(className := "flexHalf",
                              img(style := Style(marginBottom = "4px", height = "100px"), src := s"${Api.images}/single.png")
                            ),
                            div(style := Style(paddingRight = "0px"), className := "myFRRight",
                              div(className := "featureContentRow myFCLine",
                                div(className := "mySFLeft",
                                  a(style := Style(fontWeight = "bold"), href := s"${Explore.absolutePath}", target := "_blank", "347")
                                ),
                                div(className := "mySFRight",
                                  span(className := "myFont bold", "Samples")
                                ),
                              ),
                              div(className := "featureContentRow myFCLine",
                                div(className := "mySFLeft",
                                  a(style := Style(fontWeight = "bold"), href := s"${Explore.absolutePath}", target := "_blank", "409,775")
                                ),
                                div(className := "mySFRight",
                                  span(className := "myFont bold", "Cells")
                                ),
                              ),
                              div(className := "featureContentRow myFCLine",
                                div(className := "mySFLeft",
                                  a(style := Style(fontWeight = "bold"), href := s"${Browse.absolutePath}?tab=cellType",
                                    target := "_blank", "16 ")
                                ),
                                div(className := "mySFRight",
                                  span(style := Style(whiteSpace = csstypeStrings.nowrap), className := "myFont bold", "Cell Types")
                                ),
                              ),
                              div(className := "featureContentRow myFCLine",
                                div(className := "mySFLeft",
                                  a(style := Style(fontWeight = "bold"), href := s"${Browse.absolutePath}?tab=cellType",
                                    target := "_blank", "101 ")
                                ),
                                div(className := "mySFRight",
                                  span(style := Style(whiteSpace = csstypeStrings.nowrap), className := "myFont bold", "Cell Subtypes")
                                ),
                              ),
                            ),

                          ),
                        ),

                      )
                    ),

                    div(style := Style(marginBottom = "35px"), id := "samples",
                      div(style := Style(marginBottom = "5px"), className := "row",
                        div(style := Style(textAlign = csstypeStrings.center), className := "col-sm-12 overviewTitleRow",
                          span(style := Style(fontWeight = "bold"), className := "myFont overviewTitle",
                            "Species"
                          )
                        )
                      ),
                      div(className := "myJustify",
                        div(className := "mySLeft",
                          div(className := "myFIn",
                            div(className := "mySCLeft",
                              img(style := Style(marginBottom = "4px", height = "70px"), src := s"${Api.images}/homo.png")
                            ),
                            div(className := "mySCMiddle",
                              span(style := Style(fontWeight = "bold"), "Homo Sapiens")
                            ),
                            div(className := "mySCRight",
                              div(style := Style(flex = 1),
                                div(className := "mySLine",
                                  div(style := Style(flex = 1), className := "myRowLeft",
                                    a(style := Style(fontWeight = "bold"), href := s"${Statistics.absolutePath}?defaultAnchor=1",
                                      target := "_blank", "2,566")
                                  ),
                                  div(style := Style(flex = 1), className := "myRowRight",
                                    span(className := "myFont bold", "Tissues")
                                  )
                                ),
                                div(className := "mySLine",
                                  div(className := "myRowLeft",
                                    a(style := Style(fontWeight = "bold"),
                                      href := s"${Statistics.absolutePath}?defaultAnchor=3", target := "_blank", "409,775")
                                  ),
                                  div(className := "myRowRight",
                                    span(className := "myFont bold", "Cells")
                                  )
                                ),
                                div(className := "mySLine",
                                  div(className := "myRowLeft",
                                    a(style := Style(fontWeight = "bold"), href := s"#${Detail.absolutePath}?geneName=AFP&species=Hsa&tab=cellLine", target := "_blank", "27")
                                  ),
                                  div(className := "myRowRight",
                                    span(className := "myFont bold", "Cell Lines")
                                  )
                                )
                              )
                            ),
                          ),
                        ),
                        div(className := "mySRight",
                          div(className := "myFIn",
                            div(className := "flexHalf",
                              img(style := Style(marginBottom = "4px", height = "70px"), src := s"${Api.images}/mus.png")
                            ),
                            div(className := "mySCMiddle",
                              span(style := Style(fontWeight = "bold"), "Mus Musculus")
                            ),
                            div(className := "myMSCRight",
                              div(style := Style(flex = 1),
                                div(className := "mySLine",
                                  div(style := Style(flex = 3), className := "myRowLeft",
                                    a(style := Style(fontWeight = "bold"), href := s"${Statistics.absolutePath}?defaultAnchor=2", target := "_blank", "492")
                                  ),
                                  div(style := Style(flex = 7, paddingLeft = 5), className := "myRowRight",
                                    span(className := "myFont bold", "Tissues")
                                  )
                                ),
                                div(className := "mySLine",
                                  div(style := Style(flex = 3), className := "myRowLeft",
                                    a(style := Style(fontWeight = "bold"), href := s"${Statistics.absolutePath}?defaultAnchor=2", target := "_blank", "35")
                                  ),
                                  div(style := Style(flex = 7, paddingLeft = 5), className := "myRowRight",
                                    span(className := "myFont bold", "Models")
                                  )
                                ),
                              )
                            ),
                          ),
                        ),

                      )
                    ),

                    div(style := Style(marginBottom = "35px"), id := "longRnas",
                      div(style := Style(marginBottom = "5px"), className := "row",
                        div(style := Style(textAlign = csstypeStrings.center), className := "col-sm-12 overviewTitleRow",
                          span(style := Style(fontWeight = "bold"), className := "myFont overviewTitle",
                            "Spectrum"
                          )
                        )
                      ),
                      div(className := "myJustify",
                        div(
                          div(className := "myFont",
                            img(style := STool.spectrumImg, src := s"${Api.images}/healthy.png")
                          ),
                          div(style := Style(lineHeight = "35px", marginLeft = "10px"),
                            span(style := Style(fontWeight = "bold"), className := "myFont",
                              a(href := Statistics.absolutePath, target := "_blank", "Healthy")
                            ),
                            ul(className := "heUl",
                              li(className := "heLi",
                                a(href := Statistics.absolutePath, target := "_blank", "Fetal")
                              ),
                              li(className := "heLi",
                                a(href := Statistics.absolutePath, target := "_blank", "Normal")
                              ),
                            )
                          )
                        ),
                        div(
                          div(className := "myFont",
                            img(style := STool.spectrumImg, src := s"${Api.images}/hepatitis.png")
                          ),
                          div(style := Style(lineHeight = "35px", marginLeft = "10px"),
                            span(style := Style(fontWeight = "bold"), className := "myFont",
                              a(href := Statistics.absolutePath, target := "_blank", "Hepatitis")
                            ),
                            ul(className := "heUl",
                              li(className := "heLi",
                                a(href := Statistics.absolutePath, target := "_blank", "Viral")
                              ),
                              li(className := "heLi",
                                a(href := Statistics.absolutePath, target := "_blank", "Fatty")
                              ),
                              li(className := "heLi",
                                a(href := Statistics.absolutePath, target := "_blank", "Alcoholic")
                              ),
                            )
                          )
                        ),
                        div(
                          div(className := "myFont",
                            img(style := STool.spectrumImg, src := s"${Api.images}/fibrosis.png")
                          ),
                          div(style := Style(lineHeight = "35px", marginLeft = "10px"),
                            span(style := Style(fontWeight = "bold"), className := "myFont",
                              a(href := Statistics.absolutePath, target := "_blank", "Fibrosis Cirrhosis")
                            )
                          )
                        ),
                        div(
                          div(className := "myFont",
                            img(style := STool.spectrumImg, src := s"${Api.images}/carcinoma.png")
                          ),
                          div(style := Style(lineHeight = "35px", marginLeft = "10px"),
                            span(style := Style(fontWeight = "bold"), className := "myFont",
                              a(href := Statistics.absolutePath, target := "_blank", "Carcinoma")
                            ),
                            ul(className := "heUl",
                              li(className := "heLi",
                                a(href := Statistics.absolutePath, target := "_blank", "HCC")
                              ),
                              li(className := "heLi",
                                a(href := Statistics.absolutePath, target := "_blank", "ICC")
                              ),
                              li(className := "heLi",
                                a(href := Statistics.absolutePath, target := "_blank", "HB")
                              ),
                            )
                          )
                        ),
                      )
                    ),

                  )
                )
              ),
              div(style := Style(marginTop = "10px"), className := "col-sm-5",
                h4("Release Notes & News"),

                ul(style := Style(marginLeft = 20, marginTop = 10), className := "myUl",
                  li(style := Style(marginBottom = 10),
                    "The updated liver single cell atlas has integrated single cells from 347 human liver samples and annotated them into 101 cell subtypes.  [March, 2023]"
                  ),
                  li(style := Style(marginBottom = 10),
                    "GepLiver is publicly accessible. [June, 2022]"
                  ),
                  li(style := Style(marginBottom = 10),
                    "Single cell landscape of diverse liver states has been  presented in GepLiver with 409,775 cells included. [May, 2022]"
                  ),
                  li(style := Style(marginBottom = 10),
                    "RNA-seq data of 2566 human bulk tissue and 492 mouse liver samples have been integrated into GepLiver database. [April, 2022]"
                  )
                )

              ),
            )
          )
        )

      )
    )


  }

  object STool {

    val spectrumImg = Style(height = 60)

  }

}
